<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/10/01 20:31:15
  @file: map.vue
  @description:
  ==================
  引入百度地图组件
  [vue-baidu-map文档](https://dafrok.github.io/vue-baidu-map/#/zh/start/usage)
  - BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
  - 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。

  - 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。
    因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，
    不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

  - [全国-城市-百度地图中心点坐标](https://www.cnblogs.com/qinche/p/3945119.html)
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="map-width-height">
    <baidu-map
      class="map"
      ak="3eljdozg87AD4Gpov2oDcelZ8FtbaTyr"
      :center="map.center"
      :zoom="map.zoom"
      @ready="handler">
      <bm-control :offset="{ width:80, height:0 }">
        <!-- <button @click="addZoom(19)">缩放至最大</button>
        <button @click="addZoom(10)">还原</button>
        <button @click="addZoom(3)">缩放至最小</button> -->
      </bm-control>
      <!-- ready 返回一个百度地图的核心类和地图实例 -->
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <!-- 混合 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <!-- 缩略图控件 -->
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-overview-map>
      <!--定位-->
      <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> -->
      <!--点-->
      <bm-marker :position="map.center" :dragging="map.dragging" @click="infoWindowOpen">
        <!--提示信息-->
        <bm-info-window :title="map.infoWindow.content.title" :show="map.infoWindow.open">
          {{map.infoWindow.content.address}}
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue';
import BmScale from 'vue-baidu-map/components/controls/Scale.vue';
import BmMapType from 'vue-baidu-map/components/controls/MapType.vue';
import BmOverviewMap from 'vue-baidu-map/components/controls/OverviewMap.vue';
import BmControl from 'vue-baidu-map/components/controls/Control.vue';
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue';
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue';
export default {
  name: 'Map',
  props: {
    map: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    BaiduMap,
    BmNavigation,
    BmScale,
    BmMapType,
    BmOverviewMap,
    BmMarker,
    BmInfoWindow,
    BmControl
  },
  data: () => ({
    // map: {
    //   infoWindow: {
    //     open: false,
    //     title: 'Info Window Title'
    //   },
    //   center: { lng: 121.4472540000, lat: 31.3236200000 },
    //   zoom: 15,
    //   dragging: true
    // }
  }),
  methods: {
    addZoom (level) {
      this.map.zoom = level;
    },
    infoWindowOpen () {
      this.map.infoWindow.open = !this.map.infoWindow.open;
    },
    // ready 事件来执行地图 API 加载完毕后才能执行的代码
    handler ({ BMap, map }) {
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
      // 点击事件获取经纬度
      map.addEventListener('click', function (e) {
        console.log(e.point.lng, e.point.lat);
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.map-width-height {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: (826 / 1536) * 100%;
}
.map {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
</style>
